<template>
    <div class="process1">
        <div class="body">

            <div class="main">

                <topictype1 :anawer="nowtopic.answer"
                :mymp3="`${config.voiceTarget}/sounds/小朋友，请问她感觉怎么样.mp3`"
                    :mypic="`${config.imgTarget}${nowtopic.levelId}/${nowtopic.path}`"
                    :id="nowtopic.id"
                    v-if="nowtopic && nowtopic.topictype"></topictype1>
                <topictype3 :anawer="nowtopic.answer"
                          :mymp3="`${config.voiceTarget}/sounds/小朋友，请问她感觉怎么样.mp3`"
                           :id="nowtopic.id"
                    :mypic="`${config.imgTarget}${nowtopic.levelId}/${nowtopic.path}`" v-else></topictype3>


            </div>


        </div>

    </div>
</template>
<script setup>
import config from '../../config/config.js'
import topictype1 from '@/components/topictype1.vue';
import topictype3 from '@/components/topictype3.vue';
import { useAuthStore } from '../../store/index';
import { ref, onMounted } from 'vue'
const Store = useAuthStore();
const nowtopic = ref({
  levelId: 'exampleLevelId',
  path: 'examplePath',
  topictype: true, // 示例值，根据实际情况设置
  answer: 'exampleAnswer' // 示例值，根据实际情况设置
});
onMounted(() => {
    if(Store.shuaxin==0){
        Store.setshuaxin(1);
        console.log(Store.shuaxin);
        location.reload();
    }
    console.log(Store.nowtopic);
    nowtopic.value = Store.topics[Store.nowtopic]
    console.log(nowtopic);
})
</script>
<style lang="scss" scoped>
.process1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/processback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .body {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10rem;
    }

    .main {}

}
</style>